<template>
    <div>
        <city-header></city-header>
        <city-search :cities = "cities"></city-search>
        <city-list 
            :cities = "cities" 
            :hotCities = "hotCities" 
            :letter = "letter"
            ></city-list>
        <city-alphabet 
            :cities = "cities"
            @change = "handleLetterClick"
        ></city-alphabet>
    </div>
</template>

<script>
import CityHeader from './components/Header'
import CitySearch from './components/Search'
import CityList from './components/List'
import CityAlphabet from './components/Alphabet'
import Axios from 'axios'
export default {
    name: 'City',
    components: {
        CityHeader,
        CitySearch,
        CityList,
        CityAlphabet
    },
    data () {
        return {
            cities : {},
            hotCities: [],
            letter:''
        }
    },
    methods: {
        getHomeInfo: function(){
            Axios.get('/api/city.json')
            .then(this.getHomeInfos)
        },
        getHomeInfos: function(res){
            let _data = res.data;
            console.log(_data)
            if(_data.ret && _data.data){
                let data = _data.data
                console.log(data)
                this.cities = data.cities
                this.hotCities = data.hotCities
            }
            
        },
        handleLetterClick: function(val){
            console.log(val)
            this.letter = val
        } 
    },
    
    mounted () {
        this.getHomeInfo()
    } 
}
</script>

<style lang="stylus" scoped>

</style>

